<template>
    <div class="home">
        <div class="search-input" v-if="nowSchoolId">
            <img class="add" src="../assets/images/add.png" alt="">
            <!-- <div>名族大学</div>
            <i class="fa fa-angle-down down"></i> -->
            <selector title="" :options="schoolList" v-model="nowSchoolId"></selector>
            <div class="input-div">
                <img src="../assets/images/search.png" alt="">
                <input type="text" v-model="searchName" @keyup.enter="search(searchName)" class="input" placeholder="搜索商品">
            </div>
        </div>
        <swiper 
          :show-dots="false"
          auto
          height="180px"
          > 
            <swiper-item class="black swiper-demo-img" v-for="(bannerlistItem,index) in bannerList" :key="index">
               <a :href="bannerlistItem.link">
                 <img class="title fadeInUp animated imgbox" :src="bannerlistItem.img" alt="">
                </a> 
            </swiper-item>
        </swiper>
        <div class="news" @click="goNews">
            <div class="left">
                <div class="news-logo">21克快报</div>
                <div class="news-title">专属你的礼物，快来查收</div>
            </div>            
            <div class="img"><img src="../assets/images/right-1.png" alt=""></div>
        </div>
        <div class="type-list">
            <div class="type-list-item" :class="index < 5 && 'top'" v-for="(item, index) in typeList" :key="index">
                <!-- <router-link :to="item.link" > -->
	            <div @click="handleTenTap(item,index)">
                    <img :src="item.img" alt="">
                    <div class="break">{{item.name}}</div>
                </div>
            </div>
        </div>
        <div class="ershou-list">
            <div class="ershou-title" @click="goTwo">二手市场<img src="../assets/images/left.png" alt=""></div>
            <div class="ershou-item-content">
                <div class="ershou-item" 
                     v-for="(item, idx) in ershouList" 
                     :key="idx"
                     :class="(idx != ershouList.length - 1 && idx != ershouList.length - 2) && 'bottom'"
                     @click="handleSecondTap(item.id)"
                >
                    <div class="title break">{{ item.name }}</div>
                    <div class="sub-title break">{{ item.description }}</div>
                    <div class="img-list">
                        <img :src="item.img" alt="">
                        <!-- <img :src="item.img2" alt=""> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="hot scroller">
            <div class="ershou-title" @click="goHotSale">热卖精选<img src="../assets/images/left.png" alt=""></div>
            <div class="scroll-wrapper" ref="sWrapper">
                <!-- <scroller lock-y :scrollbar-x=false>
                    <div class="box1">
                        <div class="box1-item" v-for="i in 7"><img src="../assets/images/detail.png" alt="" srcset=""></div>
                        <div class="scroller-item" :key="inde" v-for="(item, inde) in hotSaleList" ref="item"
                    @click="goGoodsDetail(item)">
                        <div class="scroll-background">
                            <img :src="item.logo" alt="">
                        </div>                        
                        <div class="title break">{{ item.name }}</div>
                        <div class="price-tag">
                            <div class="price">￥{{ item.price }}</div>
                            <div class="tag" v-if="item.shopType=='2b7ac438fde249d784d1fe13e054f617'">自营</div>
                        </div>
                    </div> 
                    </div>
                </scroller> -->
                 <div class="scroller-content" ref="scroll">
                    <div class="scroller-item" :key="inde" v-for="(item, inde) in hotSaleList" ref="item"
                    @click="goGoodsDetail(item)">
                        <div class="scroll-background">
                            <img :src="item.logo" alt="">
                        </div>                        
                        <div class="title break">{{ item.name }}</div>
                        <div class="price-tag">
                            <div class="price">￥{{ item.price }}</div>
                            <div class="tag" v-if="item.shopType=='2b7ac438fde249d784d1fe13e054f617'">自营</div>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
        <div class="more-com">
            <div class="ershou-title">更多推荐</div>
            <div class="more-content">
                <div class="more-item" v-for="(item, ind) in moreList" :key="ind" @click="goGoodsDetail(item)">
                    <div class="img"><img :src="item.logo" alt=""></div>
                    <div class="more-title">{{ item.name }}</div>
                    <div class="price-tag">
                        <div class="price">￥{{ item.price }}</div>
                        <div class="tag" v-if="item.shopType=='2b7ac438fde249d784d1fe13e054f617'">自营</div>
                    </div>
                </div>
            </div>
        </div>
        <foot-nav/>
        <div class="addGoods" @click="goPublish">
            <div class="add">+</div>
            <div class="text">发布</div>
        </div>
    </div>
</template>
<script>
    import axios from '@/api/request'
    import { FETCHCODE } from '@/api/article'
    import { Swiper, Scroller, Selector ,SwiperItem} from 'vux'
    import BScroll from 'better-scroll'
    import footNav from "@/components/footer-nav.vue"
    import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
    export default {
        name: 'home',
        data () {
            return {
                bannerList:[],
                typeList: [ 
                    {   
                        img: require("../assets/images/type-1.png"),
                        name: "高校纪念",
                        link:'/highSchool'
                    },{
                        img: require("../assets/images/type-2.png"),
                        name: "二手市场",
                        link:'/two'
                    },
                    {   
                        id: 'e00eb1b0e1284bc59c647ff7d3f0a6ab',
                        img: require("../assets/images/type-3.png"),
                        name: "服装鞋帽",
                        link:'/two'
                    },
                    {   
                        id: 'ec1a75baad2b49daab914184e3e492c4',
                        img: require("../assets/images/type-4.png"),
                        name: "周边饮食",
                        link:'/two'
                    },
                    {
                        id: '4fa171781c114ba8ae4c2a417a1de8e5',
                        img: require("../assets/images/type-5.png"),
                        name: "创业产品",
                        link:'/two'
                    },
                    {   
                        id: 'a114b0771062437f8421fc819fe825e1',
                        img: require("../assets/images/type-6.png"),
                        name: "数码科技",
                        link:'/two'
                    },
                    {   
                        id: '803f9045e4cb4f4e8a64c1ebb6924ddb',
                        img: require("../assets/images/type-7.png"),
                        name: "玩转周边",
                        link:'/two'
                    },
                    {   
                        id:'9b32f60f47294b38ae235266fceb500f',
                        img: require("../assets/images/type-8.png"),
                        name: "美妆个护",
                        link:'/two'
                    },
                    {
                        img: require("../assets/images/type-9.png"),
                        name: "全部分类",
                        link:'/classify'
                    },
                    {
                        img: require("../assets/images/type-10.png"),
                        name: "申请入住",
                        link:'/classify'
                    }
                ],
                // typeList1: [
                //     {   
                //         img: require("../assets/images/type-1.png"),
                //         name: "高校纪念",
                //         link:'/highSchool'
                //     },{
                //         img: require("../assets/images/type-2.png"),
                //         name: "二手市场",
                //         link:'/two'
                //     }
                // ],
                // typeList2: [
                //     {
                //         img: require("../assets/images/type-9.png"),
                //         name: "全部分类",
                //         link:'/classify'
                //     },
                //     {
                //         img: require("../assets/images/type-10.png"),
                //         name: "申请入住",
                //         link:'/classify'
                //     }
                // ],
                ershouList: [],
                hotSaleList: [],
                moreList: [],
                nowSchoolId: "",
                schoolList: [],
                searchName: '',
                schoolCode: '',
            }
        },
        components: {
            Swiper,
            Scroller,
            footNav,
            Selector,
            SwiperItem
        },
        computed:{
            ...mapGetters({
              openId: 'doneOpenId',
              userId: 'doneUserId',
              phone: 'donePhone',
              schoolId: 'doneSchoolId',
            }),
        },
        created () {
            let self = this;
            var openId = this.openId
            if(!openId){
                // let herf = window.location.href
                // openId = (herf.split('?')[1]).split('=')[1]
                openId = self.$route.query.openId
                self.schoolCode = self.$route.query.schoolCode
                // alert('本地没有openId,去地址栏拿')
                self.SET_OPENID(openId)
                self.SET_SCHOOLCODE(self.schoolCode)
                axios('/device/userEntity/getUserByOpenId','post',{openId}).then(res=>{
                    if(res.data.code==1000){
                        console.log(res)
                        let userData = res.data.data.userCenter
                        if(userData.username){
                            // alert('该用户已注册')
                            self.SET_USERID(userData.id)
                            self.SET_SCHOOLID(userData.schoolId)
                            self.SET_PHONE(userData.username)
                        }else{
                            self.$router.push({path: '/register',query:{openId: openId,schoolCode: self.schoolCode}})
                        }     
                    }
                })
            }
            else if(openId&&!this.phone){
                // self.$vux.toast.text('您还未登录，请先登录', 'middle')
                setTimeout(function(){
                    self.$router.push({path: '/login',query:{openId: openId}})
                },1000)
            }
            else if(openId&&this.phone){
                axios('/device/userEntity/getUserByOpenId','post',{openId}).then(res=>{
                    if(res.data.code==1000){
                        let state = res.data.data.userCenter.state
                        if(state==1){
                            
                        }else{
                            self.$vux.toast.text('您的账号异常', 'middle')
                            self.$router.push({path: '/login',query:{openId: openId}})
                        }     
                    }
                })
            }
            // console.log(this.openId)
            // console.log(this.userId)
            this.fetchSixTypeList()
            this.fetchFourSecond()
            this.fetchSchoolList()
            this.fetchBannerList()
            this.fetchHotList()
            this.fetchRecommendList()
            // this.search()
        },
        mounted () {
            var _this = this;
            // this.typeList.forEach((element, index) => {
            //     element.img = require("../assets/images/type-" + (index + 1) + ".png")
            // });
            // console.log(this.typeList)
            this.$nextTick(()=> {
                this.initScroll();
            })
        },
        methods: {
            ...mapMutations(['SET_OPENID','SET_USERID','SET_PHONE','SET_SCHOOLID','SET_SCHOOLCODE']),
            fetchSixTypeList() {   //生成10个类型
                // this.typeList = []
                // axios('/device/kind/menuFirst','post',{}).then(res=>{
                //     if(res.data.code==1000){
                //         console.log(333)
                //         console.log(res)
                //         let arr = res.data.data
                //         let a = arr.slice(0,6)
                //         let newArr = this.typeList1.concat(a)
                //         this.typeList = newArr.concat(this.typeList2)
                //     }
                // })
            },
            fetchSchoolList() {
                axios('/device/school/list','post',{}).then(res=>{
                    if(res.data.code==1000){
                        // console.log(res)
                        let arr = res.data.data.list
                        for(let i in arr){
                           this.schoolList.push({key: arr[i]['id'],value: arr[i]['name']})
                        }
                        // console.log(this.schoolList)  
                        // this.nowSchoolId = this.schoolList[0].key
                        this.nowSchoolId = this.schoolId
                    }
                })
            },
            fetchBannerList() {
                axios('/device/shBanner/list','post',{pageNumber:1,pageSize:20}).then(res=>{
                    if(res.data.code==1000){
                        // console.log(res)
                        this.bannerList = res.data.data.list
                    }
                })
            },
            fetchFourSecond() {        //4个二手一级菜单
                axios('/device/kindSecond/firstMenu','post',{}).then(res=>{
                    if(res.data.code==1000){
                        // console.log(res)
                        this.ershouList = res.data.data
                    }
                })
            },
            fetchHotList() {        //热卖精选
                axios('/device/product/hotList','post',{}).then(res=>{
                    if(res.data.code==1000){
                        this.hotSaleList = res.data.data
                        // this.initScroll()
                    }
                })
            },
            fetchRecommendList() {  //更多推荐
                axios('/device/product/listRecommend','post',{}).then(res=>{
                    if(res.data.code==1000){
                        console.log(res)
                        this.moreList = res.data.data
                    }
                })
            },
            search(name){        
                //搜索商品,跳转到商品列表
                this.$router.push({path:'/goodsList',query:{name: name}})
            },
            initScroll () {
                let width = 960;
                this.hotSaleList.forEach((item, index)=> {
                    // console.log(item)
                    // console.log(index)
                    // width += this.$refs.item[0].getBoundingClientRect().width + 20;
                })
                this.$refs.scroll.style.width = width + "px";
                this.$nextTick(()=>{
                    if (!this.scroll) {
                        this.scroll = new BScroll(this.$refs.sWrapper, {
                            startX:0,
                            click:true,
                            scrollX:true,
                            scrollY:false,
                            eventPassthrough:'vertical'
                        });
                    } else {
                        this.scroll.refresh()
                    }
                });
            },
            handleTenTap(item,idx){
                // console.log(idx)
                // console.log(item)
                switch (idx) {
                    case 0: 
                        this.$router.push({path:'/highSchool',query:{schoolId:this.schoolId}})
                        break;
                    case 1: 
                        this.$router.push({path:'/two'})
                        break;
                    case 8: 
                        this.$router.push({path:'/classify',query:{userId: this.userId}})
                        break;
                    case 9: 
                        // this.$router.push({path:'/shopApply'})
                        window.location.href="http://www.chenyekeji.com:8081/21market_admin/#/RegisterAll"
                        break;
                    default :
                        this.$router.push({path:'/goodsList',query:{firstKindId: item.id}})
                }
            },
            handleSecondTap(id){
                // alert('去二手商品列表')
                this.$router.push({path:'category',query:{firstKindId: id}})
            },
            goNews() {   
                console.log('去资讯页')
                this.$router.push({path: '/newsList'})
            },
            goTwo() {   
                console.log('去二手市场')
                this.$router.push({path: '/two'})
            },
            goHotSale() {
                console.log('去热卖')
                this.$router.push({path:'/goodsList',query:{sold: 1}})
            },
            goGoodsDetail(item) {
                console.log('去商品详情页')
                this.$router.push({path: '/goodsDetail',query: {goodsId: item.id,userId: this.userId}})
            },
            goPublish() {
                let data = {
                    openId: this.openId
                }
                axios('/device/userEntity/getUserByOpenId','post',data).then(res=>{
                    if(res.data.code==1000){
                        var userData = res.data.data.userCenter
                        if(userData.ssm==2){
                            this.$router.push({path: '/publishGoods',query:{userId: userData.id}})
                        }else if(userData.ssm==1){
                            this.$vux.toast.text('认证审核中,请耐心等待吧', 'middle')
                        }else{
                            this.$vux.toast.text('您还没有认证，请先申请认证', 'middle')
                        }
                    }
                })
                
            }
        },
        
    }
</script>
<style >
    .addGoods{
        position: fixed;
        right: 5px;
        bottom: 90px;
        /*border: 1px solid #eee;*/
        /*height: 96rem/75;*/
        height: 1.28rem;
        width: 1.28rem;
        border-radius: 50%;
        /*font-size: 30px;*/
        /*line-height: 1.28rem;*/
        text-align: center;
        color: #fff;
        background: rgb(255,96,83);
        /*display: flex;*/
    }
    .addGoods .add{ 
        margin-top: 0.16rem;  /* 6px */
        font-size: 24px;
        height: 0.48rem;
        line-height: 0.48rem;
    }
    .addGoods .text{ 
        font-size: 12px;
    }
</style>
<style lang="less" scoped>
    @import "../assets/less/home.less";
     .animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.hot .scroller-content {
    position: static;
    .scroller-item{
        // overflow: hidden;
        height: 207px;
        width: 150px;
        .scroll-background{
            img{
                
            }
        }  
    }
}

.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
  height: 100%;
}
</style>
<style lang="less">
    .vux-selector {
        .weui-cell__bd::after {
            border-width: 0 2px 2px 0 !important;
        }
    }
</style>

